"use client"

import React, { useState } from 'react'
import { AdminLayout } from '@/components/layout/admin-layout'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import {
  Settings,
  Server,
  Shield,
  Bell,
  Database,
  Save,
  Download,
  Upload,
  Trash2,
  RefreshCw,
  Mail,
  Globe,
  HardDrive,
  Cpu,
  Activity
} from 'lucide-react'

export default function SettingsPage() {
  const [activeTab, setActiveTab] = useState('general')

  const handleSave = (section: string) => {
    alert(`${section} 设置已保存！`)
  }

  const handleAction = (action: string) => {
    alert(`${action} - 功能开发中...`)
  }

  return (
    <AdminLayout>
      <div className="space-y-6">
        {/* Page Header */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">系统设置</h1>
            <p className="text-gray-600">配置和管理系统各项参数</p>
          </div>
        </div>

        {/* Settings Tabs */}
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          <TabsList className="grid w-full grid-cols-5 lg:w-auto">
            <TabsTrigger value="general" className="flex items-center space-x-2">
              <Settings className="h-4 w-4" />
              <span className="hidden sm:inline">基本设置</span>
            </TabsTrigger>
            <TabsTrigger value="system" className="flex items-center space-x-2">
              <Server className="h-4 w-4" />
              <span className="hidden sm:inline">系统配置</span>
            </TabsTrigger>
            <TabsTrigger value="security" className="flex items-center space-x-2">
              <Shield className="h-4 w-4" />
              <span className="hidden sm:inline">安全设置</span>
            </TabsTrigger>
            <TabsTrigger value="notifications" className="flex items-center space-x-2">
              <Bell className="h-4 w-4" />
              <span className="hidden sm:inline">通知设置</span>
            </TabsTrigger>
            <TabsTrigger value="backup" className="flex items-center space-x-2">
              <Database className="h-4 w-4" />
              <span className="hidden sm:inline">备份管理</span>
            </TabsTrigger>
          </TabsList>

          {/* General Settings */}
          <TabsContent value="general" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Globe className="h-5 w-5" />
                    <span>网站基本信息</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">网站名称</label>
                    <Input defaultValue="创业者之家后台管理端" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">网站描述</label>
                    <textarea 
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-slate-500 focus:border-transparent"
                      rows={3}
                      defaultValue="为创业者提供全方位的商业管理解决方案"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">联系邮箱</label>
                    <Input type="email" defaultValue="admin@entrepreneur-home.com" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">网站地址</label>
                    <Input type="url" defaultValue="https://admin.entrepreneur-home.com" />
                  </div>
                  <Button onClick={() => handleSave('基本信息')}>
                    <Save className="h-4 w-4 mr-2" />
                    保存设置
                  </Button>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>系统功能开关</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <label className="text-sm font-medium text-gray-700">允许用户注册</label>
                      <p className="text-xs text-gray-500">是否允许新用户注册账户</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <label className="text-sm font-medium text-gray-700">邮箱验证</label>
                      <p className="text-xs text-gray-500">注册时是否需要验证邮箱</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <label className="text-sm font-medium text-gray-700">文章评论功能</label>
                      <p className="text-xs text-gray-500">是否允许用户评论文章</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <label className="text-sm font-medium text-gray-700">商业计划书分享</label>
                      <p className="text-xs text-gray-500">是否允许分享商业计划书</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <label className="text-sm font-medium text-gray-700">数据导出功能</label>
                      <p className="text-xs text-gray-500">是否允许导出数据</p>
                    </div>
                    <Switch />
                  </div>
                  <Button onClick={() => handleSave('功能开关')}>
                    <Save className="h-4 w-4 mr-2" />
                    保存设置
                  </Button>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* System Configuration */}
          <TabsContent value="system" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Database className="h-5 w-5" />
                    <span>数据库配置</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">数据库类型</label>
                    <select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-slate-500 focus:border-transparent" defaultValue="MySQL">
                      <option value="MySQL">MySQL</option>
                      <option value="PostgreSQL">PostgreSQL</option>
                      <option value="Oracle">Oracle</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">连接池大小</label>
                    <Input type="number" defaultValue="20" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">连接超时 (秒)</label>
                    <Input type="number" defaultValue="30" />
                  </div>
                  <div className="p-3 bg-green-50 rounded-lg border border-green-200">
                    <div className="flex items-center space-x-2">
                      <Activity className="h-4 w-4 text-green-600" />
                      <span className="text-sm text-green-800">数据库连接状态：正常</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Server className="h-5 w-5" />
                    <span>缓存配置</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">缓存类型</label>
                    <select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-slate-500 focus:border-transparent" defaultValue="Redis">
                      <option value="Redis">Redis</option>
                      <option value="Ehcache">Ehcache</option>
                      <option value="Caffeine">Caffeine</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">缓存过期时间 (分钟)</label>
                    <Input type="number" defaultValue="60" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">最大缓存大小 (MB)</label>
                    <Input type="number" defaultValue="256" />
                  </div>
                  <Button variant="destructive" onClick={() => handleAction('清空缓存')}>
                    <Trash2 className="h-4 w-4 mr-2" />
                    清空缓存
                  </Button>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* Security Settings */}
          <TabsContent value="security" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Shield className="h-5 w-5" />
                    <span>登录安全</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">密码最小长度</label>
                    <Input type="number" defaultValue="8" min="6" max="20" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">登录失败锁定次数</label>
                    <Input type="number" defaultValue="5" min="3" max="10" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">锁定时间 (分钟)</label>
                    <Input type="number" defaultValue="30" min="10" max="120" />
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <label className="text-sm font-medium text-gray-700">启用双因子认证</label>
                      <p className="text-xs text-gray-500">增强账户安全性</p>
                    </div>
                    <Switch />
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <label className="text-sm font-medium text-gray-700">定期强制修改密码</label>
                      <p className="text-xs text-gray-500">每90天强制修改密码</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>访问控制</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Session超时 (分钟)</label>
                    <Input type="number" defaultValue="120" min="30" max="480" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">IP白名单</label>
                    <textarea 
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-slate-500 focus:border-transparent"
                      rows={3}
                      placeholder="一行一个IP地址，如：192.168.1.100"
                      defaultValue="127.0.0.1&#10;192.168.1.0/24"
                    />
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <label className="text-sm font-medium text-gray-700">启用IP过滤</label>
                      <p className="text-xs text-gray-500">只允许白名单IP访问</p>
                    </div>
                    <Switch />
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <label className="text-sm font-medium text-gray-700">记录所有访问日志</label>
                      <p className="text-xs text-gray-500">记录详细的访问日志</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* Notification Settings */}
          <TabsContent value="notifications" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Mail className="h-5 w-5" />
                    <span>邮件通知</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">SMTP服务器</label>
                    <Input defaultValue="smtp.gmail.com" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">端口</label>
                    <Input type="number" defaultValue="587" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">发件人邮箱</label>
                    <Input type="email" defaultValue="noreply@entrepreneur-home.com" />
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <label className="text-sm font-medium text-gray-700">启用邮件通知</label>
                      <p className="text-xs text-gray-500">发送系统通知邮件</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <Button onClick={() => handleAction('测试邮件')}>
                    <Mail className="h-4 w-4 mr-2" />
                    测试邮件
                  </Button>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Bell className="h-5 w-5" />
                    <span>系统通知</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <label className="text-sm font-medium text-gray-700">新用户注册通知</label>
                      <p className="text-xs text-gray-500">有新用户注册时发送通知</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <label className="text-sm font-medium text-gray-700">系统错误通知</label>
                      <p className="text-xs text-gray-500">系统出错时发送通知</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <label className="text-sm font-medium text-gray-700">数据备份通知</label>
                      <p className="text-xs text-gray-500">备份完成时发送通知</p>
                    </div>
                    <Switch />
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <label className="text-sm font-medium text-gray-700">安全警报通知</label>
                      <p className="text-xs text-gray-500">检测到安全威胁时发送通知</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">通知接收邮箱</label>
                    <Input type="email" defaultValue="admin@entrepreneur-home.com" />
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* Backup Management */}
          <TabsContent value="backup" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Database className="h-5 w-5" />
                    <span>自动备份设置</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <label className="text-sm font-medium text-gray-700">启用自动备份</label>
                      <p className="text-xs text-gray-500">定期自动备份数据</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">备份频率</label>
                    <select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-slate-500 focus:border-transparent" defaultValue="每周">
                      <option value="每日">每日</option>
                      <option value="每周">每周</option>
                      <option value="每月">每月</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">备份时间</label>
                    <Input type="time" defaultValue="02:00" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">保留备份数量</label>
                    <Input type="number" defaultValue="30" min="1" max="100" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">备份存储路径</label>
                    <Input defaultValue="/backup/database/" />
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <HardDrive className="h-5 w-5" />
                    <span>手动备份操作</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">上次备份时间</label>
                    <Input value="2025-07-06 02:00:00" readOnly />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">备份状态</label>
                    <div className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      <Activity className="h-3 w-3 mr-1" />
                      正常
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Button className="w-full" onClick={() => handleAction('立即备份')}>
                      <Download className="h-4 w-4 mr-2" />
                      立即备份
                    </Button>
                    <Button variant="outline" className="w-full" onClick={() => handleAction('恢复备份')}>
                      <Upload className="h-4 w-4 mr-2" />
                      恢复备份
                    </Button>
                    <Button variant="outline" className="w-full" onClick={() => handleAction('下载备份')}>
                      <Download className="h-4 w-4 mr-2" />
                      下载备份
                    </Button>
                    <Button variant="destructive" className="w-full" onClick={() => handleAction('清理旧备份')}>
                      <Trash2 className="h-4 w-4 mr-2" />
                      清理旧备份
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>

        {/* System Status Monitor */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Activity className="h-5 w-5" />
              <span>系统状态监控</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
              <div className="text-center">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                  <Cpu className="h-8 w-8 text-blue-600" />
                </div>
                <h3 className="font-medium text-gray-900">CPU使用率</h3>
                <div className="mt-2 bg-gray-200 rounded-full h-2">
                  <div className="bg-blue-600 h-2 rounded-full" style={{ width: '45%' }}></div>
                </div>
                <p className="text-sm text-gray-600 mt-1">45%</p>
              </div>
              <div className="text-center">
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                  <Server className="h-8 w-8 text-green-600" />
                </div>
                <h3 className="font-medium text-gray-900">内存使用率</h3>
                <div className="mt-2 bg-gray-200 rounded-full h-2">
                  <div className="bg-green-600 h-2 rounded-full" style={{ width: '62%' }}></div>
                </div>
                <p className="text-sm text-gray-600 mt-1">62%</p>
              </div>
              <div className="text-center">
                <div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-3">
                  <HardDrive className="h-8 w-8 text-amber-600" />
                </div>
                <h3 className="font-medium text-gray-900">磁盘使用率</h3>
                <div className="mt-2 bg-gray-200 rounded-full h-2">
                  <div className="bg-amber-600 h-2 rounded-full" style={{ width: '78%' }}></div>
                </div>
                <p className="text-sm text-gray-600 mt-1">78%</p>
              </div>
              <div className="text-center">
                <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
                  <Activity className="h-8 w-8 text-purple-600" />
                </div>
                <h3 className="font-medium text-gray-900">网络延迟</h3>
                <div className="mt-2 bg-gray-200 rounded-full h-2">
                  <div className="bg-purple-600 h-2 rounded-full" style={{ width: '25%' }}></div>
                </div>
                <p className="text-sm text-gray-600 mt-1">25ms</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </AdminLayout>
  )
}